<template>
	<view class="vux-1px m-upload-c" :style="{ width: size, height: height||size, backgroundColor:bgColor }"
		@tap="handleChoosePic">
		<block v-if="src">
			<m-image :src="src" radius="0" :size="size" :height="height"></m-image>
			<view class="m-iconfont del-btn" hover-class="opacity-hover" @tap.stop="$emit('del', src)">
				&#xe600;
			</view>
		</block>
		<view class="content" v-else>
			<view class="m-iconfont">&#xe642;</view>
			<view class="tips" v-if="tips">{{ tips }}</view>
		</view>
	</view>
</template>

<script>
	import {
		uploadPics
	} from "@/utils/plugins";
	export default {
		props: {
			size: {
				type: String,
				default: "180rpx",
			},
			height: {
				type: String,
				default: "",
			},
			tips: {
				type: String,
				default: "",
			},
			src: {
				type: String,
				default: "",
			},
			count: {
				type: Number,
				default: 1,
			},
			bgColor: {
				type: String,
				default: '#ffffff'
			}
		},
		methods: {
			handleChoosePic() {
				let count = this.count;
				if (this.src) count = 1;
				uploadPics(count).then((urls) => {
					this.$emit("uploaded", urls, this.src);
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.m-upload-c {
		// border: 1rpx solid #e5e5e5;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.del-btn {
			position: absolute;
			right: -14rpx;
			top: -14rpx;
			z-index: 10;
			font-size: 36rpx;
			background-color: #fff;
			border-radius: 50%;
			color: $uni-color-primary;
		}

		.content {
			display: flex;
			flex-direction: column;
			align-items: center;

			.m-iconfont {
				font-size: 30rpx;
				line-height: 1;
				color: #999999;
			}

			.tips {
				line-height: 1;
				margin-top: 18rpx;
				font-size: 22rpx;
				color: #999999;
			}
		}
	}
</style>
